<template>
	<el-row class="warp">
		 <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>打卡统计</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">  
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;"
                      @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showAddDialog">添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <!--列表-->
      <el-table :data="checkins" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index" width="60">
        </el-table-column>
        <el-table-column label="序号" prop="userId">
        </el-table-column>
        <el-table-column prop="checkinType" label="打卡类型" >
        </el-table-column>
        <el-table-column prop="exceptionType" label="异常类型" >
        </el-table-column>
        <el-table-column prop="checkinTime" label="打卡时间" >
        </el-table-column>
<!--        <el-table-column prop="location_detail" label="邮箱" min-width="160" sortable>
        </el-table-column>-->
        <el-table-column prop="locationTitle" label="打卡详情">
        </el-table-column>
      </el-table>
      <!--工具条-->
     <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"   :page-size="10" :total=this.total
                       style="float:right;">
        </el-pagination>
      </el-col>
    </el-col>
  </el-row>
	</el-row>
</template>

<script>
  import API from '../../api/api_checkin'
	
 export default {
    data() {
      return {
      	loading: false,
        checkins:[],
        filters:'',
        total: 0,
        page: 0,
        limit: 7,
      }
    },
    mounted:function(){
    	this.getData();
    },
    methods:{
    	getData:function(){
    		let that = this;
    		let params = {
          		page: that.page,
          		limit: 7,
          		name: that.filters.name
        	};
    		API.checkin(params)
      			.then(function(result){
      				that.checkins = result.rows;
      				that.total = result.total;
      				
      			})
      		.catch(function(){
      		
      		})
    	},
   		 handleCurrentChange(val) {
       		 this.page = val;
        	 this.getData();
     	 },
     	 handleSearch() {
       		 this.total = 0;
        	 this.page = 1;
        	 this.getData();
      	},
    }
  }
</script>

<style>
</style>